<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${editing ? '修改' : '新增'}扫码登录参数`,
			size: '30%'
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules" :disabled="saving">
			<el-form-item label="基本信息" v-if="!editing">
				<el-card shadow="never">
					<el-form-item label="所属事业部" prop="biz_id">
						<cl-select
							v-model="form.biz_id"
							style="width:100%;"
							placeholder="请选择事业部"
							filterable
						>
							<el-option
								v-for="item in business"
								:key="item.biz_id"
								:label="item.biz_name"
								:value="item.biz_id"
							/>
						</cl-select>
					</el-form-item>
				</el-card>
			</el-form-item>
			<el-form-item label="扫码登录">
				<el-card shadow="never">
					<el-form-item label="appId" prop="appid">
						<el-input v-model="form.appid" placeholder="请选择输入appId" />
					</el-form-item>
					<el-form-item label="Secret" prop="appsecret">
						<el-input v-model="form.appsecret" placeholder="请选择输入appSecret" />
					</el-form-item>
				</el-card>
			</el-form-item>
			<el-form-item label="应用凭证">
				<el-card shadow="never">
					<el-form-item label="AgentId" prop="agentid">
						<el-input v-model="form.agentid" placeholder="请选择输入AgentId" />
					</el-form-item>
					<el-form-item label="AppKey" prop="appkey">
						<el-input v-model="form.appkey" placeholder="请选择输入AppKey" />
					</el-form-item>
					<el-form-item label="AppSecret" prop="appsecred">
						<el-input v-model="form.appsecred" placeholder="请选择输入AppSecret" />
					</el-form-item>
				</el-card>
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>
<script>
export default {
	data() {
		return {
			saving: false,
			editing: false,
			form: {
				id: "",
				biz_id: "",
				appid: "",
				appsecret: "",
				agentid: "",
				appkey: "",
				appsecred: ""
			},
			rules: {
				biz_id: [{ required: true, message: "请选择事业部" }],
				appid: [{ required: true, message: "请选择输入appId" }],
				appsecret: [{ required: true, message: "请选择输入appSecret" }],
				agentid: [{ required: true, message: "请选择输入AgentId" }],
				appkey: [{ required: true, message: "请选择输入AppKey" }],
				appsecred: [{ required: true, message: "请选择输入AppSecret" }]
			}
		};
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		open(editing = false, data = {}) {
			this.editing = editing;
			this.$refs.drawer.create(() => {
				this.reset();
				if (!editing) return;
				Object.keys(this.form).forEach(k => {
					data[k] != undefined && (this.form[k] = data[k]);
				});
			});
		},
		close() {
			this.$refs.drawer.close();
		},
		reset() {
			this.saving = false;
			this.form.biz_id = this.getCurrBiz();
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				await this.$service.dinglogin[this.editing ? "update" : "add"](this.form).done(
					() => {
						this.saving = false;
					}
				);
				this.$message.success("操作成功");
				this.$emit("confirm");
				this.reset();
				this.close();
			});
		}
	}
};
</script>
